<template>
  <div>
    <ContentWrap>
      <div class="btnWrap routeHeader">
        <div>
          <el-button @click="saveData" type="primary" v-hasPermi="['order:technolReviewTbl:save']" :disabled="disabled">保存</el-button>
          <el-button @click="submitData" type="primary" v-hasPermi="['order:technolReviewTbl:submit']" :disabled="disabled">提交</el-button>
          <el-button @click="close">关闭</el-button>
        </div>
      </div>
    </ContentWrap>

    <ContentWrap>
      <el-table v-loading="loading" :height="tableHeight" :data="list" border>
        <el-table-column type="index" width="55" label="序号" align="left" fixed="left"/>
        <!-- 列定义 -->
        <el-table-column label="任务单号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.taskNumber }}
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="left" width="180">
          <template #default="scope">
            {{ scope.row.orderNumber }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.customerName }}
          </template>
        </el-table-column>
        <el-table-column label="订单类型" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictOrderType"
              :type="DICT_TYPE.MARKET_ORDER_TYPE"
              :value="scope.row.dictOrderType"
            />
          </template>
        </el-table-column>
        <el-table-column label="产品编号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.productNumber }}
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="产品规格" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.productStandard }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{scope.row.partUnit}}
            <!-- <dict-tag
              v-if="scope.row.dictUnit"
              :type="DICT_TYPE.ORDER_PRODUCT_UNIT"
              :value="scope.row.dictUnit"
            /> -->
          </template>
        </el-table-column>
        <el-table-column label="订单数量" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.orderQuantity }}
          </template>
        </el-table-column>
        <el-table-column label="订单日期" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.orderDate }}
          </template>
        </el-table-column>
        <el-table-column label="发货日期" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.deliveryDate }}
          </template>
        </el-table-column>
        <el-table-column label="任务类型" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictTaskType"
              :type="DICT_TYPE.ORDER_TECHNOL_TASK_TYPE"
              :value="scope.row.dictTaskType"
            />
          </template>
        </el-table-column>
        <el-table-column label="变更类型" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictChangeType"
              :type="DICT_TYPE.CHANGE_TYPE"
              :value="scope.row.dictChangeType"
            />
          </template>
        </el-table-column>
        <el-table-column label="版本号" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            {{ scope.row.version }}
          </template>
        </el-table-column>
        <el-table-column label="项目合同" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <span style="cursor: pointer" @click="previewFile(scope.$index)">{{
              scope.row.projectContractFileName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="技术评审表" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <UploadFileAdd
              v-model="scope.row.fileList"
              :index="scope.$index"
              :isShowTip="false"
              :limit="1"
              :fileSize="200"
              :fileType="['pdf', 'png', 'jpg']"
              @click="uploadFile(scope.$index)"
              @update:modelValue="uploadFileRes"
            />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="left" width="180" :class="'custom-header'">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.dictTaskStatus"
              :type="DICT_TYPE.ORDER_TECHNOL_TASK_STATUS"
              :value="scope.row.dictTaskStatus"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" min-width="110" fixed="right">
          <template #default="scope">
            <!-- 删除按钮 -->
            <el-button link type="primary" @click="addRow(scope)">新增行</el-button>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import { DICT_TYPE } from '@/utils/dict'
  import * as TechnolReviewTblApi from '@/api/orderManagement/technolReviewTbl'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const disabled = ref(false)
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const { push } = useRouter()
  const loading = ref(true)
  // let title = ref('编辑技术评审表')
  const changeIndex = ref(0)
  const list = ref<any>([])

  const addRow = (scope) => {
    console.log(scope)
    const newRow = {
      taskNumber: undefined, //任务单号
      orderNumber: list.value[0].orderNumber, //订单编号
      customerName: list.value[0].customerName, //客户简称
      dictOrderType: list.value[0].dictOrderType, //订单类型
      productNumber: list.value[0].productNumber, //产品编号
      productName: list.value[0].productName, //产品名称
      productStandard: list.value[0].productStandard, //产品规格
      dictUnit: list.value[0].dictUnit, //单位
      orderQuantity: list.value[0].orderQuantity, //订单数量
      orderDate: list.value[0].orderDate, //订单日期
      deliveryDate: list.value[0].deliveryDate, //发货日期
      dictTaskType: list.value[0].dictTaskType, //任务类型
      dictChangeType: list.value[0].dictChangeType, //变更类型
      version: list.value[0].version, //版本号
      projectContractFileName: list.value[0].projectContractFileName, //项目合同
      filePath: list.value[0].filePath, //项目合同url
      dictTaskStatus: list.value[0].dictTaskStatus, //任务状态
      tblFilePath: undefined,
      tblFileName: undefined,
      parentId: list.value[0].id,
      fileList: ref([])
    }
    list.value.push(newRow)
  }

  //附件预览
  const previewFile = (index) => {
    list.value[index]
    window.open(list.value[index].filePath)
  }
  /**上传附件 */
  const uploadFile = (index) => {
    changeIndex.value = index
  }
  /**文件上传返回 */
  const uploadFileRes = async (data) => {
    
    const res = await JSON.parse(data)
    if (res.length>0) {
      let index = res[0].index
      if (JSON.parse(data).length) {
        list.value[index].tblFilePath = res[0].url
        list.value[index].tblFileName = res[0].name
      } else {
        list.value[index].tblFilePath = ''
        list.value[index].tblFileName = ''
      }
    } else {
      list.value[changeIndex.value].tblFilePath = ''
      list.value[changeIndex.value].tblFileName = ''
    }
  }
  /**保存 */
  const saveData = async () => {
    try {
      disabled.value = true
      let data = list.value
      for (let i = 1; i < data.length; i++) {
        data[0].child.push(data[i])
      }
      let type = route.query.type
      if (type === 'update') {
        data[0].submitFlag = 1
        await TechnolReviewTblApi.updateTechnolReviewTbl(data[0])
        message.success(t('common.updateSuccess'))
        tagsViewStore.delView(routes.currentRoute.value)
        push('/orderManagement/orderManagement/review/reviewTbl')
        disabled.value = false
      }
    } finally {
      disabled.value = false
    }
  }
  /**提交 */
  const submitData = async () => {
    try {
      disabled.value = true
      let data = list.value
      for (let i = 1; i < data.length; i++) {
        data[0].child.push(data[i])
      }
      let type = route.query.type
      if (type === 'update') {
        data[0].submitFlag = 2
        await TechnolReviewTblApi.updateTechnolReviewTbl(data[0])
        message.success(t('common.updateSuccess'))
        tagsViewStore.delView(routes.currentRoute.value)
        push('/orderManagement/orderManagement/review/reviewTbl')
        disabled.value = false
      }
    } finally {
      disabled.value = false
    }
  }
  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/orderManagement/orderManagement/review/reviewTbl')
  }
  //获取技术评审表数据
  const getTechnolReviewTbl = async (id) => {
    const data = await TechnolReviewTblApi.getTechnolReviewTbl(id)
    let resData = ref<any>([])
    if (data.child) {
      for (let i = 0; i < data.child.length; i++) {
        resData.value.push(data.child[i])
      }
    }
    data.child = []
    resData.value.unshift(data)
    loading.value = false

    for (let i = 0; i < resData.value.length; i++) {
      if (resData.value[i].tblFileName) {
        let json = {
          name: resData.value[i].tblFileName,
          url: resData.value[i].tblFilePath
        }
        let fileList = ref<any>([])
        fileList.value.push(json)
        resData.value[i].fileList = fileList
        list.value.push(resData.value[i])
      } else {
        let fileList = ref([])
        resData.value[i].fileList = fileList
        list.value.push(resData.value[i])
      }
    }
  }

  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {
    tableHeight.value = document.body.clientHeight - 132 - 100
    let id = route.query.id
    await getTechnolReviewTbl(id)
  })
</script>
<style lang="scss" scoped>
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table .custom-header::before {
    content: '*';
    color: red;
    margin-right: 4px; /* 根据需要调整小红星与字段的位置 */
  }
</style>
